<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <script>
    //    当我们的页面宽度 大于 960 像素的时候 页面为红色并显示computer
    //    当我们的页面宽度 大于 640 小于 960 页面为绿色并显示tablet
    //    剩下的页面为蓝色并显示mobile
    window.onresize = function () {
        responsive();
    }
    responsive();

    function responsive() {
        if (client().width > 960) {
            document.body.style.backgroundColor = "red";
            document.body.innerHTML = "computer";
        } else if (client().width > 640) {
            document.body.style.backgroundColor = "green";
            document.body.innerHTML = "tablet";
        } else {
            document.body.style.backgroundColor = "blue";
            document.body.innerHTML = "mobile";
        }
    }


    function client() {
        return {
            width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,
            height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0
        };
    }
</script>
</body>

</html>